<template>
  <div id="centerLeft1">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-pie"
                class="text-icon"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">地图数据</span>
          <dv-decoration-1 class="dv-dec-1" />
        </div>
      </div>
      <div class="d-flex jc-center relative" style="height: calc(100% - 40px);">
        <img :src="getImg()"
             alt="" style="height:90%;margin:3%">
             <!-- 未选中点 -->
             <i class="iconfont location l11 absolute" @click="changeStreet(11)" :class="active==11?'active':''" v-html="setText(11)"></i>
             <i class="iconfont location l10 absolute" @click="changeStreet(10)" :class="active==10?'active':''" v-html="setText(10)"></i>
             <i class="iconfont location l7 absolute" @click="changeStreet(7)" :class="active==7?'active':''" v-html="setText(7)"></i>
             <i class="iconfont location l47 absolute" @click="changeStreet(47)" :class="active==47?'active':''" v-html="setText(47)"></i>
             <i class="iconfont location l46 absolute" @click="changeStreet(46)" :class="active==46?'active':''" v-html="setText(46)"></i>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  props: ['active'],
  methods: {
    getImg () {
      return require(`../../static/map.png`)
    },
    setText(id){
      if(this.active==id){
        return '&#xe768;'
      }else{
        return '&#xe758;'
      }
    },
    changeStreet(id){
      this.$emit('changeStreet',id)
    }
  }
};
</script>

<style lang="scss" scoped>
#centerLeft1 {
  $box-width: 512px;
  $box-height: 410px;
  padding: 16px;
  height: $box-height;
  min-width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .dv-dec-1 {
    position: relative;
    width: 100px;
    height: 20px;
    top: -3px;
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
  .relative{
    position: relative;
  }
  .absolute{
    position: absolute;
    cursor: pointer;
  }
  .location{
    color: #fff;
  }
  .l11{
    top:50px;
    left: 285px;
  }
  .l10{
    top:138px;
    left: 274px;
  }
  .l7{
    top:86px;
    left: 200px;
  }
  .l47{
    top:138px;
    left: 430px;
  }
  .l46{
    top:160px;
    left: 620px;
  }
  .active{
    color:red;
    font-size: 24px;
  }
}
</style>